start();
function start() {
  showData();
  addZheEvent();
  addBtnAddEvent();
  frmAddClick();
  btnPrimary();
  btnCancel();
  add();
  pagaination();
}

//为每个添加删除事件
$("#tbCard").on("click", ".del", function () {
  console.log(this.parentNode.parentNode);
  //获取数据
  let data = getData();
  for (let i = 0; i < data.length; i++) {
    let id = $(this).attr("data-index");
    console.log(id);
    //判断
    if (data[i].id == id) {
      data.splice(i, 1);
    }
    saveData(data);
    showData();
    // pagaination();
  }
});

//修改
$("#tbCard").on("click", "#xiugai", function () {
  console.log(this);
  let id = $(this).attr('data-index');
  console.log(id);
  $("#changeModel").removeClass("hide");
  $("#changeModel").addClass("show");
  $("#btn-primary2").click(function () {
    $("#changeModel").removeClass("show");
    $("#changeModel").addClass("hide");
    let data = getData();
    let idMessage2 = $("#idMessage2");
    let nameMessage2 = $("#nameMessage2");
    let phoneMessage2 = $("#phoneMessage2");
    let businessNameMessage2 = $("#businessNameMessage2");
    let businessTypeMessage2 = $("#businessTypeMessage2");
    let SourceOfInTentMessage2 = $("#SourceOfInTentMessage2");
    let inTentTypeMessage2 = $("#inTentTypeMessage2");
    let AssignmentStatusMessage2 = $("#AssignmentStatusMessage2");
    let InvestmentPerMessage2 = $("#InvestmentPerMessage2");
    let SubmissionTimeMessage2 = $("#SubmissionTimeMessage2");
    let ApprovalTimeMessage2 = $("#ApprovalTimeMessage2");
    let ProtectionStatusMessage2 = $("#ProtectionStatusMessage2");
    let ProtectionDeadlineMessage2 = $("#ProtectionDeadlineMessage2");
    for (let i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data[i].id = idMessage2.val();
        data[i].name = nameMessage2.val();
        data[i].phone = phoneMessage2.val();
        data[i].businessName = businessNameMessage2.val();
        data[i].businessType = businessTypeMessage2.val();
        data[i].SourceOfInTent = SourceOfInTentMessage2.val();
        data[i].inTentType = inTentTypeMessage2.val();
        data[i].AssignmentStatus = AssignmentStatusMessage2.val();
        data[i].InvestmentPer = InvestmentPerMessage2.val();
        data[i].SubmissionTime = SubmissionTimeMessage2.val();
        data[i].ApprovalTime = ApprovalTimeMessage2.val();
        data[i].ProtectionStatus = ProtectionStatusMessage2.val();
        data[i].ProtectionDeadline = ProtectionDeadlineMessage2.val();
      }

      saveData(data);
     
    }
  });
});
//数据修改的模态框隐藏
$("#changeModel").on("click", "btn-cancel2", function () {
  $("#changeModel").removeClass("show");
  $("#changeModel").addClass("hide");
});

//判断是否加载
function add() {
  if (getData().length == 0) {
    saveData(messages);
  }
}
//存储为本地数据
function saveData(data) {
  sessionStorage.setItem("messages", JSON.stringify(data));
}
//获取本地数据
function getData() {
  let data = sessionStorage.getItem("messages");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}

//渲染数据
function showData() {
  let data1 = getData();
  $("#tbCard").empty();
  let fragment1 = document.createDocumentFragment();
  $.each(data1, function (i, n) {
    $("#tbCard").html = "";
    let tr = document.createElement("tr");
    tr.innerHTML = `
        <td><input type="checkbox"/></td>
                <td>${n.id}</td>
                <td>${n.name}</td>
                <td>${n.phone}</td>
                <td>${n.businessName}</td>
                <td>${n.businessType}</td>
                <td>${n.SourceOfInTent}</td>
                <td>${n.AssignmentStatus}</td>
                <td>${n.inTentType}</td>
                <td>${n.InvestmentPer}</td>
                <td>${n.SubmissionTime}</td>
                <td>${n.ApprovalTime}</td>
                <td>${n.ProtectionStatus}</td>
                <td>${n.ProtectionDeadline}</td>
                <td>
                    <button class = "modify" id="xiugai" data-index='${n.id}'>编辑</button>
                    <button class = "del" data-index='${n.id}'>删除</button>
                </td>
        `;
    fragment1.appendChild(tr);
  })
  $("#tbCard").append(fragment1);

}
// 阻止冒泡
function frmAddClick() {
  $("#frmAdd").click(function (e) {
    e.stopPropagation();
  })
}
function addBtnAddEvent() {
  $("#addMessage").click(function () {
    addModelShow();
  })
}
function addBtnChangeEvent() {
  $("#frmchange").click(function () {
    addModelShow();
  })
}

function addZheEvent() {
  $("#addModel").click(function () {
    addModelHide();
  })
}
function addModelHide() {
  $("#addModel").removeClass("show");
  $("#addModel").addClass("hide");
}
function addModelShow() {
  $("#addModel").removeClass("hide");
  $("#addModel").addClass("show");
}
function btnCancel() {
  $("#btn-cancel").click(function () {
    $("#addModel").removeClass("show");
    $("#addModel").addClass("hide");
  })
}

function addZheEvent2() {
  $("#changeModel").click(function () {
    addModelHide();
  });
}
function addModelHide2() {
  $("#changeModel").removeClass("show");
  $("#changeModel").addClass("hide");
}
function addModelShow2() {
  $("#changeModel").removeClass("hide");
  $("#changeModel").addClass("show");
}
function btnCancel2() {
  $("#btn-cancel2").click(function () {
    $("#changeModel").removeClass("show");
    $("#changeModel").addClass("hide");
  });
}

//添加
function btnPrimary() {
  let idMessage = $("#idMessage");
  let nameMessage = $("#nameMessage");
  let phoneMessage = $("#phoneMessage");
  let businessNameMessage = $("#businessNameMessage");
  let businessTypeMessage = $("#businessTypeMessage");
  let SourceOfInTentMessage = $("#SourceOfInTentMessage");
  let inTentTypeMessage = $("#inTentTypeMessage");
  let AssignmentStatusMessage = $("#AssignmentStatusMessage");
  let InvestmentPerMessage = $("#InvestmentPerMessage");
  let SubmissionTimeMessage = $("#SubmissionTimeMessage");
  let ApprovalTimeMessage = $("#ApprovalTimeMessage");
  let ProtectionStatusMessage = $("#ProtectionStatusMessage");
  let ProtectionDeadlineMessage = $("#ProtectionDeadlineMessage");

  //事件绑定
  $("#btn-primary").click(function () {
    let set = getData();
    set.push({
      id: idMessage.val(),
      name: nameMessage.val(),
      phone: phoneMessage.val(),
      businessName: businessNameMessage.val(),
      businessType: businessTypeMessage.val(),
      SourceOfInTent: SourceOfInTentMessage.val(),
      AssignmentStatus: AssignmentStatusMessage.val(),
      inTentType: inTentTypeMessage.val(),
      InvestmentPer: InvestmentPerMessage.val(),
      SubmissionTime: SubmissionTimeMessage.val(),
      ApprovalTime: ApprovalTimeMessage.val(),
      ProtectionStatus: ProtectionStatusMessage.val(),
      ProtectionDeadline: ProtectionDeadlineMessage.val(),

      // <td>${n.id}</td>
      // <td>${n.name}</td>
      // <td>${n.phone}</td>
      // <td>${n.businessName}</td>
      // <td>${n.businessType}</td>
      // <td>${n.SourceOfInTent}</td>
      // <td>${n.AssignmentStatus}</td>
      // <td>${n.inTentType}</td>
      // <td>${n.InvestmentPer}</td>
      // <td>${n.SubmissionTime}</td>
      // <td>${n.ApprovalTime}</td>
      // <td>${n.ProtectionStatus}</td>
      // <td>${n.ProtectionDeadline}</td>

    })
    saveData(set)
  })
}
function search() {
  // id: 4,
  // name: '聂老八',
  // phone: '15390130518',
  // businessName: '宏基企业',
  // businessType: '一般企业',
  // inTentType: '租房',
  // InvestmentPer: '王五',
  // ApprovalStatus: '已签约',
  // SubmissionTime: '2022-09-09 12:23:23',
  // ApprovalProcess: '待XXX审核',
  // ApprovalTime: '2022-09-09 12:23:23'
  let SubjectName = $('#search').val();//输入框
  let selects = document.getElementById('select1').value;
  let tbody = $('tbody')[0];
  if (SubjectName == "") {
    //Alert
    // layer.alert('请输入主体名称');
    return;
  }
  document.querySelector('tbody').innerHTML = '';
  let data1 = getData();
  if (selects == '全部') {
    console.log(selects);
    for (let i = 0; i < data1.length; i++) {
      if (data1[i].name == SubjectName || data1[i].phone == SubjectName || data1[i].InvestmentPer == SubjectName || data1[i].businessName == SubjectName) {
        let tr = '<tr><td><input type="checkbox"/></td><td>' + (data1[i].id) + '</td><td>' + (data1[i].name) + '</td><td>' + (data1[i].phone) + '</td><td>' + (data1[i].businessName) + '</td><td>' + (data1[i].businessType) + '</td><td>' + (data1[i].SourceOfInTent) + '</td><td>' + (data1[i].inTentType) + '</td><td>' + (data1[i].AssignmentStatus) + '</td><td>' + (data1[i].InvestmentPer) + '</td><td>' + (data1[i].SubmissionTime) + '</td><td>' + (data1[i].ApprovalTime) + '</td><td>' + (data1[i].ProtectionStatus) + '</td><td>' + (data1[i].ProtectionDeadline) + '</td><td><button class = "modify" id="xiugai" data-index=\'data1[i].id\'>编辑</button><button class = "del" data-index=\'data1[i].id\'>删除</button></td>' + '</tr>';
        // console.log(place[i].id);
        $('#tbCard').append(tr);
      }
    }
  } else {
    for (let i = 0; i < data1.length; i++) {
      if (data1[i].name == SubjectName && data1[i].inTentType == selects) {
        let tr = '<tr><td><input type="checkbox"/></td><td>' + (data1[i].id) + '</td><td>' + (data1[i].name) + '</td><td>' + (data1[i].phone) + '</td><td>' + (data1[i].businessName) + '</td><td>' + (data1[i].businessType) + '</td><td>' + (data1[i].SourceOfInTent) + '</td><td>' + (data1[i].inTentType) + '</td><td>' + (data1[i].AssignmentStatus) + '</td><td>' + (data1[i].InvestmentPer) + '</td><td>' + (data1[i].SubmissionTime) + '</td><td>' + (data1[i].ApprovalTime) + '</td><td>' + (data1[i].ProtectionStatus) + '</td><td>' + (data1[i].ProtectionDeadline) + '</td><td><button class = "modify" id="xiugai" data-index='+(data1[i].id)+'>编辑</button><button class = "del" data-index='+(data1[i].id)+'>删除</button></td>' + '</tr>';
        $('#tbCard').append(tr);
      }
    }
  }
}

//重置
function reset() {
  document.getElementById("search").value = '';
  document.getElementById('select1').selectedIndex = 0;
  // onloude(0,5);
  // saveData(data);
  getData();
  showData();
  start();
}

// 分页
function pagaination() {
  let page = 1;   //第几页
  let no = 0;
  let data1 = getData();
  let serialNumber = data1.length;  //序号
  console.log(serialNumber);
  onloude(0, 5);  //初始页面信息，第一页
  $("#pno").text(page);  //页码
  $("#nextPage").click(function () {
    if (no + 5 < serialNumber) {
      no += 5;
      page++;
      $("#pno").text(page);
      if (serialNumber >= (no + 5)) {
        onloude(no, no + 5);
      } else {
        onloude(no, serialNumber);
      }
    }
  });
  $("#lastPage").click(function () {
    if (no - 5 >= 0) {
      no -= 5;
      page--;
      $("#pno").text(page);
      onloude(no, no + 5);
    }
  })
}

function onloude(n, a) {
  document.querySelector('tbody').innerHTML = '';
  let data1 = getData();
  for (let i = n; i < a; i++) {
    let tr = '<tr><td><input type="checkbox"/></td><td>' + (data1[i].id) + '</td><td>' + (data1[i].name) + '</td><td>' + (data1[i].phone) + '</td><td>' + (data1[i].businessName) + '</td><td>' + (data1[i].businessType) + '</td><td>' + (data1[i].SourceOfInTent) + '</td><td>' + (data1[i].inTentType) + '</td><td>' + (data1[i].AssignmentStatus) + '</td><td>' + (data1[i].InvestmentPer) + '</td><td>' + (data1[i].SubmissionTime) + '</td><td>' + (data1[i].ApprovalTime) + '</td><td>' + (data1[i].ProtectionStatus) + '</td><td>' + (data1[i].ProtectionDeadline) + '</td><td><button class = "modify" id="xiugai" data-index='+(data1[i].id)+'>编辑</button><button class = "del" data-index='+(data1[i].id)+'>删除</button></td>' + '</tr>';
    $('#tbCard').append(tr);
  }

}